<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <style>
        .f1{
            color: red;
        }
    </style>
</head>
<div id="root">

</div>

<body>
    <script type="text/babel">
        let arr1 = [1,2,3,4]
        // 数组中的元素可以是react元素
        // react 列表渲染的原理, 将普通的数组, 转换成一个react元素的数组
        let arr2 = [
            <li>1</li>,
            <li>2</li>,
            <li>3</li>,
            <li>4</li>,
        ]
        let arr3 = arr1.map(item => (<li>{item}</li>))
        let users = [
            {
                id:1,
                name: '张三',
                age:20
            },
            {
                id:2,
                name: '李四',
                age: 30
            },
            {
                id:3,
                name: '王五',
                age:19
            }
        ]
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render((
            <div>
                <h3>简单数组元素渲染</h3>
                {arr1}
                <h3>将简单数组渲染成列表</h3>
                <ul>
                    {arr2}
                </ul>
                <hr/>
                <ul>
                    {arr3}
                </ul>
                <hr/>
                <h3>终结版本</h3>
                <ul>
                    {arr1.map(item => (<li>{item}</li>))}
                </ul>
                <h3>渲染对象列表</h3>
                <ul>
                    {
                        users.map(user => (
                            <li>
                                <h3 className="f1">编号: {user.id}</h3>
                                <h3>姓名: {user.name}</h3>
                                <h3>年龄: {user.age}</h3>
                                <hr/>
                            </li>
                        ))
                    }
                </ul>
            </div>
        ));
    </script>
</body>
</html>